import { cloneDeep } from 'lodash'
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    data: Object
  },
  data () {
    return {
      // 组件编辑数据
      formData: cloneDeep(this.data),
      formShow: false,
      // 上下文菜单配置
      contextMenu: [
        {
          label: '编辑组件',
          onClick: () => {
            this.formShow = true
          }
        }
      ]
    }
  },
  computed: {
    widgetData () {
      return this.data && this.data.data ? this.data.data : {}
    }
  },
  watch: {
    data (a, b) {
      if (JSON.stringify(a) === JSON.stringify(b)) return
      this.formData = cloneDeep(this.data)
    }
  },
  methods: {
    async saveWidget () {
      // 删除布局数据 - 不允许组件直接更新布局信息
      delete this.formData.x
      delete this.formData.y
      delete this.formData.w
      delete this.formData.h
      await this.$store.dispatch('widget/updateWidget', {
        ...this.data,
        ...cloneDeep(this.formData)
      })
    }
  }
})
